<template>
  <!--  选项卡切换组件-->
  <div class="tab">
    <router-link tag="div" class="tab-item" to="/recommend">
      <span>推荐</span>
    </router-link>
    <router-link tag="div" class="tab-item" to="/singer">
      <span>歌手</span>
    </router-link>
    <router-link tag="div" class="tab-item" to="/rank">
      <span>排行</span>
    </router-link>
    <router-link tag="div" class="tab-item" to="/search">
      <span>搜索</span>
    </router-link>
  </div>
</template>
<script>
  export default {}
</script>
<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../src/common/stylus/variable.styl"
  .tab
    width: 100%
    height: 44px
    display: grid
    grid-template-columns :repeat(4,1fr)
    grid-template-rows :100%
    justify-items: center
    align-items :center
    font-size :$font-size-medium
    background-color :$color-background
    color :$color-dialog-background

</style>
